<template>
	<view>
		<view class="leftbox">
			<view :class="leftvalue==0?'gaoliang':''" style="padding: 0 30rpx;border-radius: 10px 10px 0 0;" @click="changevalue(0)">
				<view class="flexcolumn mainpadding">
					<image :src="leftvalue==0?'../../static/image/left1s.png':'../../static/image/left1.png'" class="lefticon" mode=""></image>
					<view class="lefttext margin_top" :class="leftvalue==0?'xiaobai':''">八字排盘</view>
				</view>
			</view>
			<view :class="leftvalue==1?'gaoliang':''" style="padding: 0 30rpx;" @click="changevalue(1)">
				<view class="flexcolumn xiahuaxian mainpadding">
					<image :src="leftvalue==1?'../../static/image/left2s.png':'../../static/image/left2.png'" class="lefticon" mode=""></image>
					<view class="lefttext margin_top" :class="leftvalue==1?'xiaobai':''">紫微排盘</view>
				</view>
			</view>
			<view :class="leftvalue==2?'gaoliang':''" style="padding: 0 30rpx;" @click="changevalue(2)">
				<view class="flexcolumn xiahuaxian mainpadding">
					<image :src="leftvalue==2?'../../static/image/left3s.png':'../../static/image/left3.png'" class="lefticon" mode=""></image>
					<view class="lefttext margin_top" :class="leftvalue==2?'xiaobai':''">八字精算</view>
				</view>
			</view>
			<view :class="leftvalue==3?'gaoliang':''" style="padding: 0 30rpx;" @click="changevalue(3)">
				<view class="flexcolumn xiahuaxian mainpadding">
					<image :src="leftvalue==3?'../../static/image/left4s.png':'../../static/image/left4.png'" class="lefticon" mode=""></image>
					<view class="lefttext margin_top" :class="leftvalue==3?'xiaobai':''">奇门遁甲</view>
				</view>
			</view>
			<view :class="leftvalue==4?'gaoliang':''" style="padding: 0 30rpx;border-radius: 0 0 10px 10px;" @click="changevalue(4)">
				<view class="flexcolumn xiahuaxian mainpadding">
					<image :src="leftvalue==4?'../../static/image/left5s.png':'../../static/image/left5.png'" class="lefticon" mode=""></image>
					<view class="lefttext margin_top" :class="leftvalue==4?'xiaobai':''">数字测吉凶</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"leftlist",
		props:["disable","leftvalue"],
		data() {
			return {
			};
		},
		methods:{
			changevalue(val){
				if(this.disable==false){
					this.leftvalue = val
					this.$emit("leftclick",val)
				}
			}
		}
	}
</script>

<style>
.leftbox{
	border: 1rpx solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	/* padding: 40rpx; */
}
.lefticon{
	width: 36px;
	height: 36px;
}
.lefttext{
	color: #666;
	font-size: 16px;
}
.gaoliang{
	background-color: #f4564e;
}
</style>